<!-- 页面 -->
<template>
    <div>
        <van-nav-bar @click-left="tui()" title="商品详情" style="background: red;" left-arrow />
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in list1" :key="index">
                <img :src=item.pics_mid alt="">
            </van-swipe-item>
        </van-swipe>
        <div v-for="(item, index) in list2" :key="index">
            <p style="color: red;">{{ item.goods_price | yuan }}</p>
            <p>{{ item.goods_name }}</p>
        </div>
        <p style="background: #f0f0f0; height: 10px;"></p>
        <p style="color: red; margin-top: 10px;"><b>图文详情</b> </p>
        <img v-for="(item, index) in list2" :key="index" style="width: 100%;" :src=item.goods_big_logo alt="">

        <van-tabbar v-model="active">
            <van-tabbar-item to="/shou" icon="home-o">联系客服</van-tabbar-item>
            <van-tabbar-item to="/fen" icon="apps-o">分享</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item><van-button type="warning">加入购物车</van-button></van-tabbar-item>
            <van-tabbar-item><van-button type="danger">立即购买</van-button></van-tabbar-item>
        </van-tabbar>

    </div>
</template>
<!-- vue -->
<script>
export default {
    data() {
        return {
            // 声明的属性
            iid: '',
            list1: [],
            list2: [],
        }
    },
    //生命周期函数
    mounted() {
        this.iid = localStorage.getItem('idd')

        this.$axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/detail', {
            params: {
                goods_id: this.iid
            }
        }).then(res => {
            console.log(res);
            this.list2.push({
                goods_price: res.data.message.goods_price,
                goods_name: res.data.message.goods_name,
                goods_big_logo: res.data.message.goods_big_logo
            })
            res.data.message.pics.forEach(item => {
                this.list1.push(item)
            })
        })
        console.log(this.list2);

    },
    // 调用方法
    methods: {
        tui() {
            this.$router.go(-1)
        },
    },
    // 监听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    // 过滤器
    filters: {
        yuan(val) {
            return '￥' + val
        }
    },
    // 自定义指令
    directives: {
    }
}
</script>
<!-- css样式 -->
<style></style>